<template>
  <div class="resultContainer">
    <div class="overlazy flex align-center justify-center" v-if="showContainer">
      <i class="el-icon-circle-close" @click="showContainer = false;"></i>
      <div style="width: 300px;" v-if="isLoading">
        <h3 style="text-align: center; color: #fff; font-weight: bold; font-size: 18px;">某远程机动安全风险评估模型API</h3>
        <el-progress :text-inside="true" :stroke-width="16" :percentage="percentage" status="success"></el-progress>
        <p style="text-align: center; color: #fff;">调用中...</p>
      </div>
      <div class="contentMain" v-else>
          <h1>某远程机动安全风险评估模型API</h1>
            <el-tabs tab-position="left" style="height: calc(100% - 80px);">
              <el-tab-pane>
                <span slot="label"><i class="el-icon-view"></i> 风险识别</span>
                <div class="contentBox">
                  风险识别是远程机动安全风险评估的基础环节，其核心在于全面梳理和发现机动过程中可能影响安全的各种风险因素。该过程通常涉及多层面的信息采集和分析，包括环境因素（如地形、天气、交通路况）、设备因素（如车辆状态、通信设备可靠性）、人员因素（如驾驶员疲劳、技术能力）以及外部威胁（如突发事件、潜在冲突）。通过系统化的调研和风险源识别工具，可以有效排查潜在隐患，明确风险清单，为风险分析奠定全面的基础。
                </div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label"><i class="el-icon-data-analysis"></i> 风险分析</span>
                <div class="contentBox">风险分析是在完成风险识别后，对已发现的风险进行系统性研究和解构，明确其发生的概率、触发条件及可能的后果。这个环节通常结合定性与定量分析方法，通过数据建模、历史案例对比、情景模拟等技术手段，精确测算风险的影响范围和潜在损失。例如，在远程机动过程中，交通事故风险可能因恶劣天气或道路条件而加剧，而设备故障的风险可能受维护水平和使用年限的影响。通过细化分析，可以找到风险之间的内在关联和叠加效应，从而为后续制定针对性措施提供有力支撑。</div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label"><i class="el-icon-edit-outline"></i> 风险评价</span>
                <div class="contentBox">
                  <h1>风险等级：低风险</h1>
                  <h3>风险点：人员伤亡、财产损失、环境破坏</h3>
                  风险评价是基于风险分析的结果，对已识别和分析的风险进行综合性判断和排序的关键步骤，其目的是确定每种风险的可接受性和优先级。评价过程通常以预定的标准体系为依据，例如安全法规、行业指南或企业内部安全规范，同时结合多维度的考量因素，如风险的严重性、发生概率、可控性和应对成本等。通过采用加权评分法、层次分析法等工具，风险评价能够明确哪些风险需要优先处理、哪些风险可以接受或转移，从而为远程机动方案优化提供决策依据，确保整体安全性与成本效益的平衡。</div>
              </el-tab-pane>
            </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ResultPage',
  data() {
    return {
      showContainer: false,
      isLoading: false,
      percentage: 0,
    }
  },
  methods: {
    getResult(){
      this.showContainer = true;
      this.isLoading = true;
      let Interval = setInterval(() => {
        this.percentage += 10;
        if (this.percentage >= 100) {
          this.isLoading = false;
          clearInterval(Interval);
          this.percentage = 0;
        }
      }, 500);
    }
  }
}
</script>
<style lang="scss" scoped>
.overlazy{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
}
.el-icon-circle-close{
  font-size: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.contentMain{
  position: absolute;
  left: 270px;
  right: 270px;
  top: 70px;
  bottom: 70px;
  >h1{
    line-height: 80px;
    font-size: 26px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    margin: 0;
  }
  ::v-deep .el-tabs__item{
    color: #fff;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    &.is-active{
      color: #26cbff;
    }
  }
  ::v-deep .el-tabs__active-bar{
    background-color: #26cbff;
  }
}
::v-deep .el-progress-bar__innerText{
  color: #fff !important;
  position: relative;
  top: -1px;
}
.contentBox{
  font-size: 16px;
  color: #fff;
  line-height: 30px;
  text-align: justify;
  padding-left: 30px;
}
</style>
